import React, { Component } from 'react';
import axios from 'axios';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
import { Link } from 'react-router-dom';
const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;

class Register extends Component {

  componentWillMount(){
    document.title = "注册";
  }

  state = {
    confirmDirty: false,
    autoCompleteResult: [],
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
    var registerData = `email=${this.props.form.getFieldValue('email')}&user_name=${this.props.form.getFieldValue('user_name')}&password=${this.props.form.getFieldValue("password")}`;
    axios.post('/api/register', registerData)
      .then(function(response){
          if(response.data.code == 200){
            //todo
          }
      })
      .catch(function (error) {
            console.log(error);
      });
  }
  
  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次密码输入不一致');
    } else {
      callback();
    }
  }
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    return (
         <div>
            <Row type="flex" justify="center">
                <Col span={8}>
                    <Col offset={4}><p className="login-title">注册</p></Col>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <FormItem
                        {...formItemLayout}
                        label="E-mail"
                        >
                        {getFieldDecorator('email', {
                            rules: [{
                            type: 'email', message: '请输入正确格式的邮箱地址',
                            }, {
                            required: true, message: '请输入您的邮箱地址',
                            }],
                        })(
                            <Input />
                        )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={(
                            <span>
                            用户名&nbsp;
                            <Tooltip title="What do you want others to call you?">
                                <Icon type="question-circle-o" />
                            </Tooltip>
                            </span>
                        )}
                        >
                        {getFieldDecorator('user_name', {
                            rules: [{ required: true, message: '请输入您的用户名', whitespace: true }],
                        })(
                            <Input />
                        )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label="密码"
                        >
                        {getFieldDecorator('password', {
                            rules: [{
                            required: true, message: '请输入您的密码',
                            }, {
                            validator: this.checkConfirm,
                            }],
                        })(
                            <Input type="password" />
                        )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label="确认密码"
                        >
                        {getFieldDecorator('confirm', {
                            rules: [{
                            required: true, message: '请再次输入密码',
                            }, {
                            validator: this.checkPassword,
                            }],
                        })(
                            <Input type="password" onBlur={this.handleConfirmBlur} />
                        )}
                        </FormItem>
                        <FormItem {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit">注册</Button>
                            <Link to="/" className="register-form-user">已有账号，立刻登陆</Link>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </div>
    );
  }
}

export const RegisterForm = Form.create({})(Register);